<script setup lang="ts">
	import { reactive } from "vue"
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let obj = reactive({
		keyword: '',
		page: 1,
		list: []
	})
	onReachBottom(() => {
		console.log("触底了")
		obj.page++
		getList()
	})
	const searchList = () => {
		obj.page = 0
		obj.list = []
		getList()
	}
	const getList = () => {
		let url;
		let supplierId;
		if (userStoreInfo.userFlag == 2) {
			url = proxy.$api.getVendorLegalService
			supplierId = userStoreInfo.userInfo.supplier.id
		} else {
			url = proxy.$api.getServiceList
			supplierId = null
		}
		proxy.$req('GET', url, {
			supplierId,
			keyWord: obj.keyword,
			pageNo: obj.page,
			pageSize: 10
		}).then((res) => {
			console.log(res);
			obj.list = obj.list.concat(res.result.records)
		})
	}
	getList()
	const getListRefresh = () => {
		let url;
		let supplierId;
		if (userStoreInfo.userFlag == 2) {
			url = proxy.$api.getVendorLegalService
			supplierId = userStoreInfo.userInfo.supplier.id
		} else {
			url = proxy.$api.getServiceList
			supplierId = null
		}
		proxy.$req('GET', url, {
			supplierId,
			keyWord: obj.keyword,
			pageNo: 1,
			pageSize: 10
		}).then((res) => {
			console.log(res);
			obj.list = res.result.records
		})
	}
	const routerLink = (e, item) => {
		uni.$on('refreshServe', (e) => {
			obj.page = 1
			obj.list = []
			getListRefresh()
			uni.$off('refreshServe')
		})
		if (item) {
			router.push({
				name: e,
				params: {
					id: item.id,
				}
			})
		} else {
			router.push({
				name: e,
			})
		}
	}
	const call = (e) => {
		uni.makePhoneCall({
			phoneNumber: parseInt(e)
		})
	}
</script>

<template>
	<u-navbar class="navbar" bgColor="rgba(255, 255, 255, 0)" :placeholder="true" title="" :autoBack="true">
		<template #center>
			<view class="searchLine">
				<u-search inputStyle="
					width:484rpx;
					heigth:76rpx;
					border-radius: 10rpx;" shape="square" :showAction="false" :clearabled="true" placeholder="搜索"
					v-model="obj.keyword" @search="searchList"></u-search>
			</view>
		</template>
	</u-navbar>
	<view class="modal" v-for="(item,index) in obj.list" :key="index" @click="routerLink('lawServeDetail',item)">
		<view class="modalL">
			<image class="img" v-if="userStoreInfo.userFlag==2"
				:src="JSON.parse(item.thumbnail).length > 0 ?JSON.parse(item.thumbnail)[0].url:''" mode=""></image>
			<image class="img" v-else
				:src="item.images.length > 15 && JSON.parse(item.images).length > 0 ?JSON.parse(item.images)[0].url:''"
				mode=""></image>
		</view>
		<!-- <view class="">
				{{JSON.parse(item.thumbnail)[0]}}
			</view> -->
		<view class="modalR">
			<view class="title">
				{{item.title}}
			</view>
			<view class="location">
				<text style="padding: 5rpx 3rpx;"><u-icon size="26rpx" name="map"></u-icon></text>
				<text class="text">
					{{item.address}}
				</text>
			</view>
			<view class="call" @click.stop="call">
				<view v-if="userStoreInfo.userFlag==2"><u-icon size="40rpx" color="white" name="edit-pen"></u-icon>
				</view>
				<view v-else><u-icon size="40rpx" color="white" name="phone"></u-icon></view>
			</view>
		</view>
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="obj.list.length==0">
		<u-empty mode="list">
		</u-empty>
	</view>
	<view class="gysBtn" v-if="userStoreInfo.userFlag==2" @click="routerLink('addLawServe',null)">
		发布
	</view>
</template>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.gysBtn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #CB645E;
		color: #fff;
		border-radius: 10rpx;
		position: fixed;
		bottom: 40rpx;
		left: 32rpx;
	}

	.searchLine {
		padding-left: 30rpx;
	}

	.modal {
		position: relative;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		display: flex;
		width: 686rpx;
		height: 244rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.modalL {
			margin-right: 25rpx;

			.img {
				width: 176rpx;
				height: 176rpx;
			}
		}

		.modalR {
			.call {
				width: 100rpx;
				height: 48rpx;
				background: #CB645E;
				border-radius: 8rpx;
				text-align: center;
				line-height: 48rpx;
				padding: 6rpx 25rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: 15rpx;
				right: 20rpx;
			}

			.title {
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
			}

			.location {
				padding: 5rpx 0;
				display: flex;

				.text {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}
			}

			.location::before {
				content: none;
			}
		}

	}
</style>